<template>
  <div class="content">
    <h1>Tab</h1>
    <p>选项卡切换</p>
  </div>
  <div class="content">
    <h2>示例用法</h2>
    <p>点击查看效果。</p>
    <Tab title="导航1">内容1</Tab>
    <Tabs title="导航2">内容2</Tabs>
  </div>


  <div>
    <p class="fl">上一步：
      <router-link to="/doc/dialog">Dialog 组件</router-link>
    </p>
    <p class="fr">下一节：
      <router-link to="#">开发中…</router-link>
    </p>
  </div>
</template>

<script lang="ts">
  import Tab from "../lib/Tab.vue";
  import Tabs from "../lib/Tabs.vue";
  export default {
    name: 'TabsDemo',
    components: {Tabs, Tab}
  };
</script>

<style lang="scss" scoped>
  .content {
    margin-bottom: 40px;

    & > :first-child {
      margin-bottom: 20px;
      position: relative;
      z-index: -1;
    }

    & > p {
      /*margin-left: 20px;*/
      margin-bottom: 20px;
    }
  }

  .page {
    margin-top: 30px;

    a {
      color: #50a0ff;
    }
  }
</style>